<template>
    <div class="lizhi">
        <!-- 面包絮 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>人事管理 </el-breadcrumb-item>
            <el-breadcrumb-item>离职管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 待离职 -->
        <el-tabs v-model="activeName" class="demo-tabs">

            <el-tab-pane label="待离职" name="first">
                <el-button type="primary" @click="$router.push('/index/banli')">办理离职</el-button>
                <el-button @click="Exportexcel()">导出</el-button>
                <el-table :data="tableData" style="width: 100%" id="out-table"  v-loading="loading"
                element-loading-text="Loading...">
                    <el-table-column fixed prop="date" label="序号" width="80" type="index" />
                    <el-table-column fixed prop="name" label="姓名" />
                    <el-table-column prop="bumen" label="部门"  />
                    <el-table-column prop="gangwei" label="岗位"  />
                    <el-table-column prop="shoujihao" label="手机号" />
                    <el-table-column prop="gonghao" label="工号"  />
                    <el-table-column prop="zhengjianhao" label="证件号"  />
                    <el-table-column prop="gongzuoxingzhi" label="工作性质" />
                    <el-table-column prop="zhuangtai" label="状态"  />
                    <el-table-column prop="ruzhiriqi" label="入职日期" />
                    <el-table-column prop="lizhiriqi" label="离职日期"  />
                    <el-table-column prop="shiling" label="司龄" />
                    <el-table-column prop="lizhiyuanyin" label="离职原因"/>
                    <el-table-column fixed="right" label="操作" >
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="lizhi(scope.row)">确认离职</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <!-- 已离职 -->
            <el-tab-pane label="已离职" name="second">
                <el-button @click="excel()">导出</el-button>
                <el-table :data="tableData1" style="width: 100%" id="out-table1"  v-loading="loading"
                element-loading-text="Loading...">
                    <el-table-column fixed prop="date" label="序号" width="80" type="index" />
                    <el-table-column fixed prop="name" label="姓名" />
                    <el-table-column prop="bumen" label="部门"  />
                    <el-table-column prop="gangwei" label="岗位"  />
                    <el-table-column prop="shoujihao" label="手机号"  />
                    <el-table-column prop="gonghao" label="工号"/>
                    <el-table-column prop="zhengjianhao" label="证件号" />
                    <el-table-column prop="gongzuoxingzhi" label="工作性质" />
                    <el-table-column prop="zhuangtai" label="状态" />
                    <el-table-column prop="ruzhiriqi" label="入职日期" />
                    <el-table-column prop="lizhiriqi" label="离职日期" />
                    <el-table-column prop="shiling" label="司龄" />
                    <el-table-column prop="lizhiyuanyin" label="离职原因"/>
                    <el-table-column fixed="right" label="操作" >
                        <template #default="scope">
                            <el-button type="danger" size="small" @click="dellizhi(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <!-- 确认离职 -->
        <el-drawer v-model="drawer" title="I am the title" :with-header="false">
            <h4>员工信息</h4>
            <div class="int">
                <el-form :model="ruleForm" label-width="120px" :rules="rules" ref="ruleFormRef" status-icon>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="ruleForm.name" width="200px" placeholder="请输入姓名" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="性别" prop="resource">
                        <el-radio-group v-model="ruleForm.resource" :disabled="true">
                            <el-radio label="男" />
                            <el-radio label="女" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="shoujihao">
                        <el-input v-model="ruleForm.shoujihao" placeholder="请输入手机号" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="工号" prop="gonghao">
                        <el-input v-model="ruleForm.gonghao" placeholder="请输入工号" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="证件号码" prop="zhengjianhao">
                        <el-input v-model="ruleForm.zhengjianhao" placeholder="请输入证件号码" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="岗位" prop="gangwei">
                        <el-select v-model="ruleForm.gangwei" placeholder="请选择岗位" :disabled="true">
                            <el-option label="项目经理" value="项目经理" />
                            <el-option label="科室主任" value="科室主任" />
                            <el-option label="副总裁" value="副总裁" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="部门" prop="bumen">
                        <el-select v-model="ruleForm.bumen" placeholder="请选择部门" :disabled="true">
                            <el-option label="项目部" value="项目部" />
                            <el-option label="产品部" value="产品部" />
                            <el-option label="人力资源部" value="人力资源部" />
                            <el-option label="财务部" value="财务部" />
                            <el-option label="行政部" value="行政部" />

                        </el-select>
                    </el-form-item>
                    <el-form-item label="职务" prop="zhiwu">
                        <el-select v-model="ruleForm.zhiwu" placeholder="请选择职务" :disabled="true">
                            <el-option label="财务人员" value="财务人员" />
                            <el-option label="作业员" value="作业员" />
                            <el-option label="招聘专员" value="招聘专员" />
                            <el-option label="行政主任" value="行政主任" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工作性质" prop="gongzuoxingzhi">
                        <el-select v-model="ruleForm.gongzuoxingzhi" placeholder="请选择工作性质" :disabled="true">
                            <el-option label="正式" value="正式" />
                            <el-option label="试用" value="试用" />
                            <el-option label="实习" value="实习" />
                            <el-option label="兼职" value="兼职" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态" prop="zhuangtai">
                        <el-select v-model="ruleForm.zhuangtai" placeholder="请选择状态">
                            <el-option label="待离职" value="待离职" />
                            <el-option label="已离职" value="已离职" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="司龄" prop="shiling">
                        <el-select v-model="ruleForm.shiling" placeholder="请选择状态">
                            <el-option label="待离职" value="待离职" />
                            <el-option label="已离职" value="已离职" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="离职原因" prop="lizhiyuanyin">
                        <el-select v-model="ruleForm.lizhiyuanyin" placeholder="请选择状态" :disabled="true">
                            <el-option label="家庭原因" value="家庭原因" />
                            <el-option label="工作原因" value="工作原因" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="入职时间" prop="ruzhiriqi">
                        <el-date-picker v-model="ruleForm.ruzhiriqi" type="date" placeholder="请选择时间" format="YYYY/MM/DD"
                            value-format="YYYY-MM-DD" style="width:450px" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="离职时间" prop="lizhiriqi">
                        <el-date-picker v-model="ruleForm.lizhiriqi" type="date" placeholder="请选择时间" format="YYYY/MM/DD"
                            value-format="YYYY-MM-DD" style="width:450px" :disabled="true" />
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="$router.back()">返回</el-button>
                        <el-button type="primary" @click="queren()">确认</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>

<script  setup>
import { ref, onMounted } from 'vue'
import * as request from '@/api/biao/biao'
import { useRouter } from 'vue-router'
import * as XLSX from 'xlsx'
import fs from 'file-saver'
var activeName = ref('first')
var loading=ref(true)
var $router = useRouter()
var drawer = ref(false)
var tableData = ref([])
var tableData1 = ref([])
//首次渲染
onMounted(async () => {
    var res = await request.dailizhi_login()
    console.log(res);
    loading.value=false
    tableData.value = res.data.filter(item => item.zhuangtai == '待离职' || item.shiling == '待离职')
    tableData1.value = res.data.filter(item => item.zhuangtai == '已离职' || item.shiling == '已离职')
})

var ruleFormRef = ref()
var ruleForm = ref({
    name: '',
    bumen: '',
    gangwei: '',
    shoujihao: '',
    gonghao: '',
    zhengjianhao: '',
    gongzuoxingzhi: '',
    zhuangtai: '',
    ruzhiriqi: '',
    shiyongqi: '',
    yueshu: '',
    zhiwu: '',
    resource: '',
    lizhiriqi: '',
    shiling: '',
    lizhiyuanyin: ''
})
//数据校验
var rules = ref({
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
    ],
    bumen: [
        { required: true, message: '请选择部门', trigger: 'blur' },
    ],
    gangwei: [
        { required: true, message: '请选择岗位', trigger: 'blur' },
    ],
    shoujihao: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
    ],
    gonghao: [
        { required: true, message: '请输入工号', trigger: 'blur' },
    ],
    zhengjianbiaohao: [
        { required: true, message: '请输入证件号码', trigger: 'blur' },
    ],
    gongzuoxingzhi: [
        { required: true, message: '请选择工作性质', trigger: 'blur' },
    ],
    zhuangtai: [
        { required: true, message: '请选择状态', trigger: 'blur' },
    ],
    ruzhiriqi: [
        { required: true, message: '请选择入职时间', trigger: 'blur' },
    ],
    lizhiriqi: [
        { required: true, message: '请选择入职时间', trigger: 'blur' },
    ],
    siling: [
        { required: true, message: '请选择司龄', trigger: 'blur' },
    ],
    yuanyin: [
        { required: true, message: '请选择离职原因', trigger: 'blur' },
    ],
})
//数据回显
var lizhi = (admin) => {
    drawer.value = true
    ruleForm.value = admin
}
var queren = async () => {
    console.log(ruleForm.value);
    //离职审批
    var res = await request.queren_login(ruleForm.value)
    console.log(res);
    ElNotification({
        title: "通知",
        message: "离职审批成功",
        type: "success",
        duration: 2000,
    });
    var i = tableData.value.findIndex(item => item.id == ruleForm.value.id)
    if (i != -1) tableData.value.splice(i, 1)
    drawer.value = false

}
//导出
var Exportexcel = () => {
    excelExport(document.querySelector('#out-table'), 'dailizhi')
}
var excel = () => {
    excelExport(document.querySelector('#out-table1'), 'yilizhi')
}
// 自动分析dom元素导出excel
var excelExport = (table, filename) => {
    // workbook,
    const wb = XLSX.utils.table_to_book(table)
    //  console.log(wb);
    /* Export to file (start a download) */
    const defaultCellStyle = {
        font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
        fill: { fgColor: { rgb: 'FFFFAA00' } },
    }
    const wopts = {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary',
        cellStyle: true,
        defaultCellStyle: defaultCellStyle,
        showGridLines: false,
    }
    const wbout = XLSX.write(wb, wopts)
    const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
    fs.saveAs(blob, filename + '.xlsx')
}
var s2ab = (s) => {
    if (typeof ArrayBuffer !== 'undefined') {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
    } else {
        const buf = new Array(s.length);
        for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
        return buf;
    }
}
//删除人员
var dellizhi = async (id) => {
    var res = await request.dellizhi_login(id);
    ElNotification({
        title: "通知",
        message: "删除人员成功",
        type: "success",
        duration: 2000,
    });
    var i = tableData1.value.findIndex(item => item.id == id)
    if (i != -1) tableData1.value.splice(i, 1)
    console.log(res);
};
</script>
<style scoped>
.lizhi{
    width: 100%;
}
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.el-breadcrumb {
    margin-bottom: 20px;
}
.el-table{
    margin-top:20px;
  }
</style>